<template>
  <div class="organization-manage flex-column">
    <div class="page-head action-bar flex-row-between flex-row-center">
      <div>团队名称 : {{ $g.session.data || "无" }}</div>
      <el-space>
        <el-button type="primary" @click="setDesign({ type: '1' })">主管部门创建</el-button>
        <el-button type="primary" @click="setDesign({ type: '2' })">单位创建</el-button>
      </el-space>
    </div>

    <div class="page-body flex-row-between">
      <div class="page-nav">
        <div class="title"><el-input placeholder="请输入"></el-input></div>
        <div class="view">
          <el-tree :data="data" :props="props" default-expand-all :expand-on-click-node="false" :height="208">
            <template #default="{ node, data }">
              <div class="tree-node flex-row-between flex-row-center">
                <span>
                  <Icon :icon="data.type == 1 ? 'Jiedian' : 'Jiedian-Cjdw'"></Icon>
                  {{ data.name }}
                </span>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="organization-page">
        <div class="title">
          <el-space>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-space>
        </div>
        <div class="view">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in path" :key="item.name">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="view">
          <el-card class="card" v-for="item in resultData" :key="item.name">
            <div class="prview"></div>
            <div class="footer flex-row-between flex-row-center">
              <span class="name flex-row-center">
                <Icon icon="Jiedian"></Icon>
                {{ item.name }}
              </span>
              <el-dropdown placement="top-end" trigger="click">
                <Icon icon="MoreFilled"></Icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="setDesign(item)">
                      <Icon icon="edit"></Icon>
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <Icon icon="delete"></Icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog
      width="500px"
      :title="title"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :model-value="design ? true : false"
      @close="setDesign()"
    >
      <OrganizationDesign v-if="design" :design="design" @close="setDesign()"></OrganizationDesign>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import OrganizationDesign from "./OrganizationDesign.vue";
export default {
  extends: BaseComponent,
  name: "OrganizationManage",
  components: { OrganizationDesign },
  data() {
    return {
      design: null,
      loading: false,
      query: {},
      props: {
        value: "value",
        label: "name",
        children: "children"
      }
    };
  },
  computed: {
    title() {
      let design = this.design || {};
      let name = design.type != "2" ? "主管部门" : "单位";
      let action = design.id || design.name ? "编辑" : "创建";
      return `${name}${action}`;
    },
    resultData() {
      return [{ name: "主管部门" }, { name: "四川省" }, { name: "高新区" }];
    },
    path() {
      return [{ name: "主管部门" }, { name: "四川省" }, { name: "高新区" }];
    },
    data() {
      return [
        {
          name: "主管部门",
          value: "主管部门",
          type: 1,
          children: [{ name: "四川省", value: "四川省", type: 1 }]
        },
        {
          name: "参建单位",
          value: "参建单位",
          type: 2,
          children: [{ name: "监理单位", value: "监理单位", type: 2 }]
        }
      ];
    }
  },
  created() {
    this.getData();
  },

  methods: {
    setDesign(design) {
      this.design = design;
    },
    getData() {
      this.$g.ajax.$api("organization.getList", this.query).then((result) => {
        console.log(result);
        this.result = result;
      });
    },
    remove(item) {
      this.$g.ajax.$api("organization.remove", item).then((result) => {
        console.log(result);
      });
    }
  }
};
</script>
<style>
.organization-manage {
  position: relative;
  overflow: auto;
  flex-grow: 1;
}
.organization-page {
  overflow: auto;
  flex-grow: 1;
  border-left: 1px solid #2f517e1f;
}
.card {
  width: 23%;
  margin: 10px 1%;
  display: inline-block;
}
.card .prview {
  height: 200px;
  background-color: #f5f5f5;
  margin: -1px;
  position: relative;
}
.card .prview::before {
  content: "";
  position: absolute;
  inset: 20px;
  background-color: #747c99;
}
.card .footer {
  padding: 5px 10px;
  white-space: nowrap;
}
.el-card__body {
  padding: 0;
}
.card .name .el-icon {
  color: var(--el-color-primary);
  margin-right: 5px;
}
</style>
